<template>
  <section id="education" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">教育背景</h2>
      <div class="education-grid">
        <div
          v-for="(edu, index) in education"
          :key="index"
          class="education-card card"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <div class="education-header">
            <div class="education-icon">
              <span>🎓</span>
            </div>
            <div class="education-meta">
              <h3 class="education-degree">{{ edu.degree }}</h3>
              <p class="education-school">{{ edu.school }}</p>
            </div>
          </div>

          <div class="education-info">
            <div class="info-item">
              <span class="info-label">专业</span>
              <span class="info-value">{{ edu.major }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">GPA</span>
              <span class="info-value glow-text">{{ edu.gpa }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">时间</span>
              <span class="info-value">{{ edu.period }}</span>
            </div>
          </div>

          <div class="education-courses">
            <h4 class="courses-title">核心课程</h4>
            <div class="courses-list">
              <span
                v-for="course in edu.courses"
                :key="course"
                class="course-badge"
              >
                {{ course }}
              </span>
            </div>
          </div>

          <div v-if="edu.projects" class="education-projects">
            <h4 class="projects-title">课程项目</h4>
            <ul class="projects-list">
              <li v-for="project in edu.projects" :key="project">
                {{ project }}
              </li>
            </ul>
          </div>

          <div v-if="edu.achievements" class="education-achievements">
            <h4 class="achievements-title">获奖情况</h4>
            <ul class="achievements-list">
              <li v-for="achievement in edu.achievements" :key="achievement">
                {{ achievement }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="certifications">
        <h3 class="certifications-title">技能证书</h3>
        <div class="certifications-grid">
          <div
            v-for="cert in certifications"
            :key="cert.name"
            class="cert-card card"
          >
            <div class="cert-icon">{{ cert.icon }}</div>
            <div class="cert-info">
              <h4 class="cert-name">{{ cert.name }}</h4>
              <p class="cert-issuer">{{ cert.issuer }}</p>
              <p class="cert-date">{{ cert.date }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const education = [
  {
    degree: '学士学位',
    school: '某某大学',
    major: '计算机科学与技术',
    gpa: '3.8/4.0',
    period: '2015.09 - 2019.06',
    courses: ['数据结构', '算法设计', '数据库系统', '操作系统', '计算机网络', '软件工程'],
    projects: [
      '基于Web的在线图书管理系统',
      '移动端校园导航应用',
      '分布式聊天系统'
    ],
    achievements: [
      '优秀毕业生',
      '国家奖学金 (2018)',
      'ACM程序设计竞赛省二等奖'
    ]
  },
  {
    degree: '硕士学位',
    school: '某某大学',
    major: '软件工程',
    gpa: '3.9/4.0',
    period: '2019.09 - 2022.06',
    courses: ['高级软件工程', '分布式系统', '机器学习', '云计算', '大数据处理'],
    projects: [
      '基于深度学习的图像识别系统',
      '微服务架构电商平台',
      '实时数据分析平台'
    ],
    achievements: [
      '优秀研究生',
      '学术发表论文2篇',
      '研究生国家奖学金 (2021)'
    ]
  }
]

const certifications = [
  { name: 'AWS认证解决方案架构师', issuer: 'Amazon', icon: '☁️', date: '2023' },
  { name: 'Kubernetes应用开发者认证', issuer: 'CNCF', icon: '☸️', date: '2023' },
  { name: '敏捷项目管理认证', issuer: 'Scrum Alliance', icon: '📊', date: '2022' }
]
</script>

<style scoped>
.education-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.education-card {
  animation: slideInUp 0.6s ease-out both;
  transition: all 0.3s;
}

.education-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 5px 30px rgba(0, 217, 255, 0.2);
  transform: translateY(-5px);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.education-header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.education-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(0, 217, 255, 0.1);
  border-radius: 50%;
  border: 2px solid var(--accent-blue);
}

.education-meta {
  flex: 1;
}

.education-degree {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.education-school {
  color: var(--accent-blue);
  font-size: 1.1rem;
}

.education-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.info-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.info-value {
  color: var(--text-primary);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.education-courses,
.education-projects,
.education-achievements {
  margin-bottom: 1.5rem;
}

.courses-title,
.projects-title,
.achievements-title {
  color: var(--accent-blue);
  font-size: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.courses-title::before {
  content: '</>';
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-purple);
}

.courses-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.course-badge {
  padding: 0.4rem 0.8rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent-blue);
}

.projects-list,
.achievements-list {
  list-style: none;
  padding-left: 0;
}

.projects-list li,
.achievements-list li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.projects-list li::before,
.achievements-list li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1.2rem;
}

.certifications {
  margin-top: 4rem;
}

.certifications-title {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 2rem;
  text-align: center;
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.cert-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
  animation: slideInUp 0.6s ease-out both;
  transition: all 0.3s;
}

.cert-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-5px);
  box-shadow: 0 5px 30px rgba(0, 217, 255, 0.2);
}

.cert-icon {
  font-size: 2.5rem;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 217, 255, 0.1);
  border-radius: 8px;
  border: 2px solid var(--accent-blue);
}

.cert-info {
  flex: 1;
}

.cert-name {
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cert-issuer,
.cert-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.cert-date {
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 768px) {
  .education-grid {
    grid-template-columns: 1fr;
  }

  .certifications-grid {
    grid-template-columns: 1fr;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}
</style>
